<template>
	<view class="biliDetail">
		<view class="biliSuccess">
			<text>+{{Data.list.recharge}}.00</text>
			<text>充值成功</text>
		</view>
		<view class="biliDeta">
			<view>
				<text>充值卡号</text>
				<text>{{Data.list.visitNum}}</text>
			</view>
			<view>
				<text>支付方式</text>
				<text>微信支付</text>
			</view>
			<view>
				<text>支付时间</text>
				<text>{{Data.list.orderTime}}</text>
			</view>
			<view>
				<text>支付单号</text>
				<text>{{Data.list.orderId}}</text>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		useTopStore
	} from '@/store/TopUpService.js';
	import {
		reactive,
		onMounted
	} from 'vue'
	const Data = reactive({
		list: {}
	})
	const topStore = useTopStore();
	onMounted(() => {
		topStore.billDetail && (Data.list = topStore.billDetail)

	})
</script>

<style lang="less" scoped>
	.biliDetail {
		width: 750rpx;

		.biliSuccess {
			width: 690rpx;
			height: 200rpx;
			margin: 0 auto 40rpx;
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			border-bottom: 1px solid #f2f2f2;

			text {
				margin: 12rpx 0;
				font-size: 30rpx;
				font-weight: 600;

				&:first-child {
					font-size: 40rpx;
					color: #f46363;
				}
			}
		}

		.biliDeta {
			width: 690rpx;
			margin: 0 auto;
			font-size: 30rpx;
			font-weight: 500;

			view {
				margin: 20rpx 0;

				text:first-child {
					margin-right: 40rpx;
					color: #a3a3a3;
				}
			}
		}
	}
</style>
